<template>
  <el-row style="background-color: white">
    <el-col v-for="(item,i) in tableData" :key="i" class="infinite-list-item list-item" :lg="4" :span="12">
      <el-card shadow="hover" class="card-margin-top" style="border: none;cursor: pointer" :body-style="{ padding: '14px',borderRadius:'10px' }">
        <div style="margin-bottom: 5px">
          <img :src="item.shop_info.image" style="width: 100%;border-radius: 10px;" class="image" @click="toShop(item.shop_info)">
        </div>
        <div class="shop-msg-item">
          <span @click="toShop(item.shop_info)">{{ item.shop_info.title }}</span>
        </div>
        <div class="color-red shop-msg-item" style="font-size: 16px">
          <span>￥{{ item.shop_info.money }}</span>
          <span class="color-gray" style="margin-left: 5px;font-size: 10px">{{ item.shop_info.sales }}人购买</span>
        </div>
        <div class="color-gray shop-msg-item" style="font-size: 12px;position: relative">
          <span>来自：{{ item.platform.name }}</span>
          <span class="color-red" style="margin-left: 5px;float: right">{{ item.shop_info.brand_name }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'CenterShopsPanel',
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    toShop(item) {
      window.open(item.link, '_blank')
      // this.$router.push(`/shop/item/${item.id}`)
    }
  }
}
</script>

<style scoped>
.shop-msg-item{
  font-size: 14px;
  margin-top: 5px;
}
</style>
